<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>外边距重叠</title>
        <style type="text/css">
            .outer { margin: 100px ; border: 2px solid red ; }
            .box { margin: 100px ; background-color: #1e9fff ; height: 200px ; }
            .inner { background-color: rgba(255, 255, 0, 0.5); margin: -50px ; height: 100px ; }
        </style>
    </head>
    <body>

        <div class="outer">
            <div class="box">
                <div class="inner"></div>
            </div>
        </div>
        
    </body>
</html>